<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业01</title>
    <script src="../代码/半成品代码/day03-Ajax-Element/js/vue.js"></script>
    <script src="../代码/半成品代码/day03-Ajax-Element/js/axios-0.18.0.js"></script>
</head>

<body>

    <!-- 需求: Vue挂载完成后,通过axios发送异步请求到服务端,或者学生列表数据,并通过Vue展示在页面上. -->
    <div id="app">

        <table border="1" cellspacing="0" width="80%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(item, index) in students" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td><img :src="item.image" height="50" width="70"></td>
                <td>{{item.age}}</td>
                <td>
                    <span>{{item.gender==1?"男":"女"}}</span>
                </td>
                <td>{{item.score}}</td>
                <td>
                    <span style="color: green;" v-show="item.score>=80">优秀</span>
                    <span style="color: yellow;" v-show="item.score>=60&&item.score<80">及格</span>
                    <span style="color: red;" v-show="item.score<60">不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            students: []
        },
        mounted() {
            axios.get("https://mock.apifox.cn/m1/3128855-0-default/student").then((result) => {
                this.students = result.data.data
            });
        }
    })
</script>

</html>